
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"/>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/plugins/jquery/jquery-1.9.1.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="js/plugins/d3/d3.v3.min.js"></script>
    <style>
        .nodetext {
            font-size: 12px;
            font-family: SimSun;
            fill: #000000;
        }
 
 
        .tooltip {
            height: auto;
            font-family: simsun;
            font-size: 14px;
            text-align: center;
        }
 
        select#lineFontType.form-control,
        select#nodesFontType.form-control {
            width: 184px;
        }
 
        .layout-split-east {
            border-left: 5px solid #E6EEF8;
        }
    </style>
    <!--<base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
</head>
 
<body style="margin: 0px;">
    <!-- 力导向图div -->
    <div id="divid" ondblclick=""></div>
    <script>
 
        $(document).ready(function () {
            showChart();
        })
        function showChart() {
            var data = {
                "links": [
                    { "source": "陆洋", "target": "建银国际产业基金管理有限公司", "relation": "副董事长大人", "sourceId": "1", "targetId": "2", "sourceImg": "", "targetImg": "", "sourceColor": "rgb(255,187,70)", "targetColor": "rgba(255,33,63,0.98)", "sourceRadius": "15", "targetRadius": "30", lineColor: "rgba(29,112,255,1)" },
                    { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "总经理", "sourceId": "2", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "#00FF00", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#EEEE00" },
                    { "source": "汪红辉", "target": "天津裕丰股权投资管理有限公司", "relation": "董事", "sourceId": "2", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#0000CD" },
                    { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "法人", "sourceId": "2", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#9AC0CD" },
                    { "source": "汪红辉", "target": "乾行文化投资公司", "relation": "董事长", "sourceId": "2", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#CD4F39" },
                    { "source": "汪红辉", "target": "建银国际产业基金管理有限公司", "relation": "董事", "sourceId": "", "targetId": "", "sourceImg": "", "targetImg": "", "sourceColor": "", "targetColor": "", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#0000CD" },
                    { "source": "胡章宏", "target": "建银国际产业基金管理有限公司", "relation": "董事长", "sourceId": "", "targetId": "", "sourceImg": "images/person.png", "targetImg": "", "sourceColor": "rgba(255,135,216,0)", "targetColor": "", "sourceRadius": "15", "targetRadius": "30", "lineColor": "#CD4F39" ,"name":"曹操", "sex":"男"}

				]
            };
            var options = {};
            options.backgroundColor = "rgba(44,202,255,0)";
            options.nodesFontType = "SimSun";
            options.nodesFontSize = 20;
            options.lineFontType = "SimHei";
            options.lineFontSize = 12;
            options.lineColor = "#000000";
            options.showExamples = true;
            options.examplesX = 20;
            options.examplesY = 450;
            options.examplesFontColor = "#000000";
            drawChart("divid", options, data);
        }
 
 
        function drawChart(divid, options, datas, dataFilter) {
            var backgroundColor = options.backgroundColor; //背景颜色
            var nodesFontType = options.nodesFontType; //节点字体
            var nodesFontSize = options.nodesFontSize; //节点字号
            var lineFontType = options.lineFontType; //关系字体
            var lineFontSize = options.lineFontSize; //关系字号
            var lineColor = options.lineColor; //连线颜色
            var examplesFontColor = options.examplesFontColor; //关系示例字体颜色
            var pageWidth = window.innerWidth;
            var pageHeight = window.innerHeight;
            var width = pageWidth; //画布宽
            var height = pageHeight; //画布高
            var svgChart = d3.select("svg");
            svgChart.remove();
 
            var tip = $(".tooltip");
            if (tip.length > 0) {
                tip.remove();
            }
 
 
            var sourceDatas = {};
            sourceDatas.links = [];
            for (var i = 0; i < datas.links.length; i++) {
                var jsonObj = {};
                jsonObj.source = datas.links[i].source;
                jsonObj.target = datas.links[i].target;
                jsonObj.relation = datas.links[i].relation;
                jsonObj.sourceId = datas.links[i].sourceId;
                jsonObj.targetId = datas.links[i].targetId;
                jsonObj.sourceImg = datas.links[i].sourceImg;
                jsonObj.targetImg = datas.links[i].targetImg;
                jsonObj.sourceColor = datas.links[i].sourceColor;
                jsonObj.targetColor = datas.links[i].targetColor;
                jsonObj.sourceRadius = datas.links[i].sourceRadius;
                jsonObj.targetRadius = datas.links[i].targetRadius;
                jsonObj.lineColor = datas.links[i].lineColor;
                sourceDatas.links.push(jsonObj);
            }
            var resourceLinks = sourceDatas.links;
 
 
            if (dataFilter != undefined && dataFilter.length > 0) {
                var indexArray = [];
                for (var i = 0; i < dataFilter.length; i++) {
                    for (var j = 0; j < resourceLinks.length; j++) {
                        if (resourceLinks[j].relation == dataFilter[i].relation && dataFilter[i].isShow == "false") {
                            indexArray.push(j);
                        }
                    }
                }
                if (indexArray.length > 0) {
                    var tempArray = [];
                    for (var j = 0; j < resourceLinks.length; j++) {
                        for (var i = 0; i < indexArray.length; i++) {
                            if (indexArray[i] != j) {
                                if (i == indexArray.length - 1) {
                                    tempArray.push(resourceLinks[j]);
                                    break;
                                }
                                continue;
                            } else {
                                break;
                            }
 
                        }
                    }
                    resourceLinks = tempArray;
                }
            }
            var links = resourceLinks;
 
            //关系分组  
            var linkGroup = {};
            //对连接线进行统计和分组，不区分连接线的方向，只要属于同两个实体，即认为是同一组  
            var linkmap = {};
            for (var i = 0; i < links.length; i++) {
                var key = links[i].source < links[i].target ? links[i].source + ':' + links[i].target : links[i].target + ':' + links[i].source;
                if (!linkmap.hasOwnProperty(key)) {
                    linkmap[key] = 0;
                }
                linkmap[key] += 1;
                if (!linkGroup.hasOwnProperty(key)) {
                    linkGroup[key] = [];
                }
                linkGroup[key].push(links[i]);
            }
            //为每一条连接线分配size属性，同时对每一组连接线进行编号  
            for (var i = 0; i < links.length; i++) {
                var key = links[i].source < links[i].target ? links[i].source + ':' + links[i].target : links[i].target + ':' + links[i].source;
                links[i].size = linkmap[key];
                //同一组的关系进行编号  
                var group = linkGroup[key];
                //给节点分配编号  
                setLinkNumber(group);
            }
 
            //节点
            var nodes = {};
            //关系对应颜色
            var relationColor = {};
 
            for (var i = 0; i < links.length; i++) {
                links[i].source = nodes[links[i].source] || (nodes[links[i].source] = { name: links[i].source, color: links[i].sourceColor, image: links[i].sourceImg, radius: links[i].sourceRadius });
                links[i].target = nodes[links[i].target] || (nodes[links[i].target] = { name: links[i].target, color: links[i].targetColor, image: links[i].targetImg, radius: links[i].targetRadius });
            }
 
            var sourceData = datas.links;
            for (var i = 0; i < sourceData.length; i++) {
                relationColor[sourceData[i].relation] = { "relation": sourceData[i].relation, "lineColor": sourceData[i].lineColor };
            }
 
 
            nodes = d3.values(nodes);
            relationColor = d3.values(relationColor);
 
            var examples_x = parseFloat(options.examplesX); //关系示例坐标x
            var examples_y = parseFloat(options.examplesY); //关系示例坐标y
            var examplesLength = 80;
            var examplesSize = Math.floor((width - examples_x) / examplesLength);
            var examplesRow = relationColor.length % examplesSize == 0 ? relationColor.length / examplesSize : Math.ceil(relationColor.length / examplesSize);
            //计算关系示列位置
            for (var i = 1; i <= relationColor.length; i++) {
                var num = i % examplesSize == 0 ? examplesSize : i % examplesSize;
                relationColor[i - 1].x = examples_x + (num - 1) * examplesLength;
                relationColor[i - 1].y = examples_y + 20 * Math.ceil(i / examplesSize);
            }
            if (dataFilter == undefined) {
                dataFilter = [];
                for (var i = 0; i < relationColor.length; i++) {
                    dataFilter.push({ "relation": relationColor[i].relation, "isShow": "true" });
                }
            }
 
 
            //绑定相连节点
            for (var i = 0; i < nodes.length; i++) {
                for (var j = 0; j < links.length; j++) {
                    if (nodes[i].name == links[j].source.name) {
                        nodes[i][links[j].target.name] = { name: links[j].target.name };
                    }
                    if (nodes[i].name == links[j].target.name) {
                        nodes[i][links[j].source.name] = { name: links[j].source.name };
                    }
                }
            }

            var zoom = d3.behavior.zoom()
                .scaleExtent([1,10])
                .on("zoom",function(){
                    zoomed();
                });
 
            var svg = d3.select("#" + divid).append("svg")
                .attr("width", width)
                .attr("height", height)
                .attr("style", "background-color:" + backgroundColor).call(zoom).on("dblclick.zoom", null);
            /*var gs = svg.select("g").call(zoom).on("dblclick.zoom", null);*/

            var zoomed = function (){
                /*gs.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")");*/
                svg.attr("transform","scale("+d3.event.scale+")");
            } //d3.event.translate 是平移的坐标值，d3.event.scale 是缩放的值。

            if (options.showExamples == "true") {
                var examples = svg.selectAll(".examples")
                    .data(relationColor)
                    .enter()
                    .append("svg:g")
                    .attr("fill-opacity", function (d) {
                        for (var i = 0; i < dataFilter.length; i++) {
                            if (d.relation == dataFilter[i].relation && dataFilter[i].isShow == "false") {
                                return 0.2;
                            }
                        }
                        return 1;
                    })
                    .on("click", function (d) {
                        for (var i = 0; i < dataFilter.length; i++) {
                            if (dataFilter[i].relation == d.relation) {
                                if (dataFilter[i].isShow == "true") {
                                    dataFilter[i].isShow = "false";
                                } else {
                                    dataFilter[i].isShow = "true";
                                }
                            }
                        }
                        drawChart(divid, options, datas, dataFilter);
                    });
 
 
                examples.append("svg:path")
                    .attr("d", function (d) {
                        var x1 = d.x;
                        var y1 = d.y;
                        var x2 = x1 + 20;
                        var y2 = y1;
                        return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
                    })
                    .style("stroke", function (d) {
                        if (d.lineColor == "") {
                            return lineColor;
                        } else {
                            return d.lineColor;
                        }
                    })
                    .style("stroke-width", 2.5);
                examples.append("svg:text")
                    .style("font-size", "14px")
                    .style("fill", examplesFontColor)
                    .attr("x", function (d) {
                        if (d.relation.length > 3) {
                            return d.x + 20 + 14 * 4 / 2;
                        }
                        return d.x + 20 + 14 * d.relation.length / 2;
                    })
                    .attr("y", function (d) {
                        return d.y + 5;
                    })
                    /*.attr('text-anchor', "middle")*/
                    .text(function (d) {
                        if (d.relation.length > 3) {
                            return d.relation.substring(0, 3) + "...";
                        }
                        return d.relation;
                    })
                    .on("mouseover", function (d) {
                        tooltip.html("<span>" + d.relation + "</span>")
                            .style("left", (d3.event.pageX) + "px")
                            .style("top", (d3.event.pageY + 20) + "px")
                            .style("display", "block")
                            .style("position", "absolute")
                            .style("opacity", 1.0);
                    })
                    .on("mouseout", function (d, i) {
                        tooltip.style("opacity", 0.0);
                    });
            }
 
 
 
            //D3力导向布局
            var force = d3.layout.force()
                .nodes(nodes)
                .links(links)
                .size([width, height])
                .linkDistance(200)
                .charge(-1500)
                .start();
 
 
            //边             
            var edges_path = svg.selectAll(".edgepath")
                .data(links)
                .enter()
                .append("path")
                .attr("marker-end", function (d, i) {
                    var arrowMarker = svg.append("marker")
                        .attr("id", "arrow" + i)
                        .attr("markerUnits", "userSpaceOnUse")
                        .attr("markerWidth", "16")
                        .attr("markerHeight", "15")
                        .attr("viewBox", "0 0 12 12")
                        .attr("refX", 9)
                        .attr("refY", 6)
                        .attr("orient", "auto")
                        .append("svg:path")
                        .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
                        .attr("fill", function () {
                            return d.lineColor = "" ? lineColor : d.lineColor;
                        });
 
                    return "url(#arrow" + i + ")";
                })
                .style("stroke", function (d) {
                    if (d.lineColor == "") {
                        return lineColor;
                    } else {
                        return d.lineColor;
                    }
                })
                .style("stroke-width", 1.5)
                .on("mouseover", function (d) {
                    //影藏其它连线上文字
                    edges_text.style("fill-opacity", function (edge) {
                        if (edge === d) {
                            return 1;
                        }
                        return 0;
                    })
                    edges_path.style("stroke-width", function (edge) {
                        if (edge === d) {
                            return 4;
                        }
                        return 1.5;
                    })
                })
                .on("mouseout", function (d, i) {
                    //显示连线上的文字
                    edges_text.style("fill-opacity", 1);
                    edges_path.style("stroke-width", 1.5);
                });
 
 
            //边上的文字（人物之间的关系）            
            var edges_text = svg.selectAll(".linetext")
                .data(links)
                .enter()
                .append("svg:g")
                .attr("class", "linetext")
                .attr("fill-opacity", 1)
                .attr("data-container", "body")
                .attr("data-toggle", "popover")
                .attr("data-placement", "right")
                .attr("data-html", "true")
                .attr("data-content", "<table><tr><td>1</td><td>数量</td></tr><tr><td>2</td></tr></table>")
                /*.attr("data-toggle", "tooltip")
                .attr("data-placement", "right")
                .attr("title", "右侧的 Tooltip")*/;
            edges_text.append("svg:text")
                .style("font-size", (lineFontSize + "px"))
                .style("font-family", lineFontType)
                .style("fill", "#000000")
                .attr("y", ".31em")
                .attr('text-anchor', "middle")
                .text(function (d) {
                    return d.relation;
                });
 
            edges_text.insert('rect', 'text')
                .attr('width', function (d) {
                    return d.relation.length * lineFontSize;
                })
                .attr('height', function (d) {
                    return lineFontSize;
                })
                .attr("y", "-.6em")
                .attr('x', function (d) {
                    return -d.relation.length * lineFontSize / 2;
                })
                .style('fill', '#fff');
 
            // 圆形图片节点（人物头像）
            var circle = svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("circle")
                .style("stroke", function (d) {
                    if (d.color == "") {
                        return "#EE8262";
                    }
                    return d.color;
                })
                .style("stroke-width", "2px")
                .attr("r", function (d) {
                    return d.radius;
                })
                .attr("fill", function (d, i) {
                    //节点图片不为空是添加背景色
                    if (d.image == "") {
                        if (d.color == "") {
                            return "#EE8262";
                        }
                        return d.color;
                    } else {
                        //创建圆形图片
                        var defs = svg.append("defs").attr("id", "imgdefs")
 
                        var catpattern = defs.append("pattern")
                            .attr("id", "catpattern" + i)
                            .attr("height", 1)
                            .attr("width", 1)
 
                        catpattern.append("image")
                            /* .attr("x", - (img_w / 2 - radius))
                            .attr("y", - (img_h / 2 - radius)) */
                            .attr("width", d.radius * 2)
                            .attr("height", d.radius * 2)
                            .attr("xlink:href", d.image)
 
                        return "url(#catpattern" + i + ")";
                    }
 
                }).attr("data-container", "body")
                .attr("data-toggle", "popover")
                .attr("data-placement", "right")
                .attr("data-html", "true")
                .attr("data-content", "右侧的 Popover 中的一些内容")
                /*.attr("data-toggle", "tooltip")
                .attr("data-placement", "right")
                .attr("title", "右侧的 Tooltip")*/
                .on("mouseover", function (d, i) {
                    //影藏其它连线上文字
                    edges_text.style("fill-opacity", function (edge) {
                        if (edge.source === d || edge.target === d) {
                            return 1;
                        }
                        if (edge.source !== d && edge.target !== d) {
                            return 0;
                        }
                    })
                    //其它节点亮度调低
                    circle.style("opacity", function (edge) {
                        var v = d.name;
                        if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
                            return 1;
                        } else {
                            return 0.2;
                        }
                    })
                    //其他连先亮度调低
                    edges_path.style("opacity", function (edge) {
                        if (edge.source === d || edge.target === d) {
                            return 1;
                        }
                        if (edge.source !== d && edge.target !== d) {
                            return 0.2;
                        }
                    })
                    //其他节点文字亮度调低
                    nodes_text.style("opacity", function (edge) {
                        var v = d.name;
                        if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
                            return 1;
                        } else {
                            return 0.2;
                        }
                    })
 
                })
                .on("mouseout", function (d, i) {
                    //显示连线上的文字
                    edges_text.style("fill-opacity", 1);
                    edges_path.style("opacity", 1);
                    circle.style("opacity", 1);
                    nodes_text.style("opacity", 1);
                    tooltip.style("opacity", 0.0);
 
                })
                .call(force.drag);
 
            var tooltip = d3.select("body").append("div")
                .attr("class", "tooltip")
                .attr("opacity", 0.0);
 
 
            var nodes_text = svg.selectAll(".nodetext")
                .data(nodes)
                .enter()
                .append("text")
                .style("font-size", (nodesFontSize + "px"))
                .style("font-family", nodesFontType)/*.text(function (d) {
                    if (d.name) {
                        return d.name;
                    }else {
                        "";
                    }
                })*/.attr('x', function (d) {
                    d3.select(this).append('tspan')
                        .attr("dx", -nodesFontSize * (name.length / 2))
                        .text(function (d) {
                            if (d.name){
                                return d.name;
                            }else {
                                "";
                            }
                        });
                })
                /*.attr('x', function (d) {
                    var name = d.name;
                    //如果小于四个字符，不换行
                    if (name.length < 4) {
                        d3.select(this).append('tspan')
                            .attr("dx", -nodesFontSize * (name.length / 2))
                            .text(function () { return name; });
                    } else if (name.length >= 4 && name.length <= 6) {
                        var top = d.name.substring(0, 3);
                        var bot = d.name.substring(3, name.length);
 
                        d3.select(this).append('tspan')
                            .attr("dx", -nodesFontSize * 1.5)
                            .attr("dy", -nodesFontSize * 0.5)
                            .text(function () { return top; });
 
                        d3.select(this).append('tspan')
                            .attr("dx", -(nodesFontSize * name.length / 2))
                            .attr("dy", nodesFontSize)
                            .text(function () { return bot; });
                    } else if (name.length > 7) {
                        var top = d.name.substring(0, 3);
                        var mid = d.name.substring(3, 6);
                        var bot = d.name.substring(6, name.length);
 
                        d3.select(this).append('tspan')
                            .attr("dx", -nodesFontSize * 1.5)
                            .attr("dy", -nodesFontSize * 0.5)
                            .text(function () { return top; });
 
 
                        d3.select(this).append('tspan')
                            .attr("dx", -nodesFontSize * 3)
                            .attr("dy", nodesFontSize)
                            .text(function () { return mid; });
 
                        d3.select(this).append('tspan')
                            .attr("dx", -nodesFontSize * 2)
                            .attr("dy", nodesFontSize)
                            .text(function () { return "..."; });
                    }
                })*/
                .on("mouseover", function (d, i) {
                    //影藏其它连线上文字
                    edges_text.style("fill-opacity", function (edge) {
                        if (edge.source === d || edge.target === d) {
                            return 1;
                        }
                        if (edge.source !== d && edge.target !== d) {
                            return 0;
                        }
                    })
                    //其他节点亮度调低
                    circle.style("opacity", function (edge) {
                        var v = d.name;
                        if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
                            return 1;
                        } else {
                            return 0.2;
                        }
                    })
                    //其他连线亮度调低
                    edges_path.style("opacity", function (edge) {
                        if (edge.source === d || edge.target === d) {
                            return 1;
                        }
                        if (edge.source !== d && edge.target !== d) {
                            return 0.2;
                        }
                    })
                    //其他节点文字亮度调低
                    nodes_text.style("opacity", function (edge) {
                        var v = d.name;
                        if (edge.name == v || (edge[v] != undefined && edge[v].name == v)) {
                            return 1;
                        } else {
                            return 0.2;
                        }
                    })
                    tooltip.html("<span>" + d.name + "</span>")
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY + 20) + "px")
                        .style("display", "block")
                        .style("opacity", 1.0);
                })
                .on("mouseout", function (d, i) {
                    //显示连线上的文字
                    edges_text.style("fill-opacity", 1);
                    edges_path.style("opacity", 1);
                    circle.style("opacity", 1);
                    nodes_text.style("opacity", 1);
                    tooltip.style("opacity", 0.0);
 
                })
                .call(force.drag);
 
            var drag = force.drag()
                .on("dragstart", function (d, i) {
                    d.fixed = true;    //拖拽开始后设定被拖拽对象为固定
                })
                .on("dragend", function (d, i) {
                })
                .on("drag", function (d, i) {
                });
 
            //力学图运动开始时
            force.on("start", function () {
            });
 
            //力学图运动结束时
            force.on("end", function () {
            });
 
            force.on("tick", function () {
                //限制结点的边界
                nodes.forEach(function (d, i) {
                    d.x = d.x - 45 < 0 ? 45 : d.x;
                    d.x = d.x + 45 > width ? width - 45 : d.x;
                    d.y = d.y - 45 < 0 ? 45 : d.y;
                    d.y = d.y + 45 > height ? height - 45 : d.y;
                });
 
                edges_path.attr("d", function (d) {
                    var tan = Math.abs((d.target.y - d.source.y) / (d.target.x - d.source.x)); //圆心连线tan值
                    var x1 = d.target.x - d.source.x > 0 ? Math.sqrt(d.sourceRadius * d.sourceRadius / (tan * tan + 1)) + d.source.x :
                        d.source.x - Math.sqrt(d.sourceRadius * d.sourceRadius / (tan * tan + 1)); //起点x坐标
                    var y1 = d.target.y - d.source.y > 0 ? Math.sqrt(d.sourceRadius * d.sourceRadius * tan * tan / (tan * tan + 1)) + d.source.y :
                        d.source.y - Math.sqrt(d.sourceRadius * d.sourceRadius * tan * tan / (tan * tan + 1)); //起点y坐标
                    var x2 = d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt(d.targetRadius * d.targetRadius / (1 + tan * tan)) :
                        d.target.x + Math.sqrt(d.targetRadius * d.targetRadius / (1 + tan * tan));//终点x坐标
                    var y2 = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(d.targetRadius * d.targetRadius * tan * tan / (1 + tan * tan)) :
                        d.target.y + Math.sqrt(d.targetRadius * d.targetRadius * tan * tan / (1 + tan * tan));//终点y坐标
                    if (d.target.x - d.source.x == 0 || tan == 0) { //斜率无穷大的情况或为0时
                        y1 = d.target.y - d.source.y > 0 ? d.source.y + d.sourceRadius : d.source.y - d.sourceRadius;
                        y2 = d.target.y - d.source.y > 0 ? d.target.y - d.targetRadius : d.target.y + d.targetRadius;
                    }
                    if (d.linknum == 0) {//设置编号为0的连接线为直线，其他连接线会均分在两边  
                        d.x_start = x1;
                        d.y_start = y1;
                        d.x_end = x2;
                        d.y_end = y2;
                        return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
                    }
                    var a = d.sourceRadius > d.targetRadius ? d.targetRadius * d.linknum / 3 : d.sourceRadius * d.linknum / 3;
                    var xm = d.target.x - d.source.x > 0 ? d.source.x + Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) / (1 + tan * tan)) :
                        d.source.x - Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) / (1 + tan * tan));
                    var ym = d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) * tan * tan / (1 + tan * tan)) :
                        d.source.y - Math.sqrt((d.sourceRadius * d.sourceRadius - a * a) * tan * tan / (1 + tan * tan));
                    var xn = d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt((d.targetRadius * d.targetRadius - a * a) / (1 + tan * tan)) :
                        d.target.x + Math.sqrt((d.targetRadius * d.targetRadius - a * a) / (1 + tan * tan));
                    var yn = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt((d.targetRadius * d.targetRadius - a * a) * tan * tan / (1 + tan * tan)) :
                        d.target.y + Math.sqrt((d.targetRadius * d.targetRadius - a * a) * tan * tan / (1 + tan * tan));
                    if (d.target.x - d.source.x == 0 || tan == 0) {//斜率无穷大或为0时
                        ym = d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt(d.sourceRadius * d.sourceRadius - a * a) : d.source.y - Math.sqrt(d.sourceRadius * d.sourceRadius - a * a);
                        yn = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(d.targetRadius * d.targetRadius - a * a) : d.target.y + Math.sqrt(d.targetRadius * d.targetRadius - a * a);
                    }
 
                    var k = (x1 - x2) / (y2 - y1);//连线垂线的斜率
                    var dx = Math.sqrt(a * a / (1 + k * k)); //相对垂点x轴距离
                    var dy = Math.sqrt(a * a * k * k / (1 + k * k)); //相对垂点y轴距离
                    if ((y2 - y1) == 0) {
                        dx = 0;
                        dy = Math.sqrt(a * a);
                    }
                    if (a > 0) {
                        var xs = k > 0 ? xm - dx : xm + dx;
                        var ys = ym - dy;
                        var xt = k > 0 ? xn - dx : xn + dx;
                        var yt = yn - dy;
                    } else {
                        var xs = k > 0 ? xm + dx : xm - dx;
                        var ys = ym + dy;
                        var xt = k > 0 ? xn + dx : xn - dx;
                        var yt = yn + dy;
                    }
                    //记录连线起始和终止坐标，用于定位线上文字
                    d.x_start = xs;
                    d.y_start = ys;
                    d.x_end = xt;
                    d.y_end = yt;
                    return 'M' + xs + ' ' + ys + ' L ' + xt + ' ' + yt;
                });
 
                //更新连接线上文字的位置
                edges_text.attr("transform", function (d) {
                    return "translate(" + (d.x_start + d.x_end) / 2 + "," + (d.y_start + d.y_end) / 2 + ")" + " rotate(" + Math.atan((d.y_end - d.y_start) / (d.x_end - d.x_start)) * 180 / Math.PI + ")";
                });
 
 
                //更新结点图片和文字
                circle.attr("cx", function (d) { return d.x });
                circle.attr("cy", function (d) { return d.y });
 
                nodes_text.attr("x", function (d) { return d.x });
                nodes_text.attr("y", function (d) { return d.y });
            });
        }
 
 
        function setLinkNumber(group) {
            if (group.length == 0) return;
            if (group.length == 1) {
                group[0].linknum = 0;
                return;
            }
            var maxLinkNumber = group.length % 2 == 0 ? group.length / 2 : (group.length - 1) / 2;
            if (group.length % 2 == 0) {
                var startLinkNum = -maxLinkNumber + 0.5;
                for (var i = 0; i < group.length; i++) {
                    group[i].linknum = startLinkNum++;
                }
            } else {
                var startLinkNum = -maxLinkNumber;
                for (var i = 0; i < group.length; i++) {
                    group[i].linknum = startLinkNum++;
                }
            }
 
        }
        $(function () {
            $("[data-toggle='popover']").popover();

        });
        /*$(function () {
            $("[data-toggle='tooltip']").tooltip();
        });*/
    </script>

</body>
</html>